import { MENU_LIST } from "@/constants"
import router from "@/router"
import type { App } from "vue"

/**
 * 注册一个自定义指令
 * 根据菜单返回的操作权限来控制按钮的使用权限
 *
 * @param app Vue的 app 实例(app.use(setBtnPermission))
 */
function setBtnPermission(app: App) {
  // 这会在 `mounted` 和 `updated` 时都调用
  app.directive("btn-permission", (el, binding) => {
    // 获取菜单列表
    const menuList: MenuTreeResponse[] = JSON.parse(localStorage.getItem(MENU_LIST) || "[]")
    // 获取当前路径
    const path = router.currentRoute.value.fullPath
    // 获取按钮绑定的权限标识
    const permission = binding.value

    // 根据路径找到对应的菜单
    const findMenu = getCurrentMenu(menuList, path)
    if (findMenu) {
      // 获取相应的操作权限的code
      const menuCodes = findMenu.children.map((item) => item.menuCode)
      if (!menuCodes.includes(permission)) {
        // 如果没有此操作权限 移除 el 元素
        if (el.parentNode) {
          el.parentNode.removeChild(el)
        }
      }
    }
  })
}

/**
 * 根据当前页面路径来获取当前菜单
 * @param menuList 首页左侧的菜单数据
 * @param path 当前页面路径
 */
const getCurrentMenu = (menuList: MenuTreeResponse[], path: string): MenuTreeResponse | null => {
  let findMenu: MenuTreeResponse | null = null

  function _recurseGetMenu(menus: MenuTreeResponse[] = []) {
    for (const menu of menus) {
      if (menu.path === path) {
        findMenu = menu
      } else if (menu.children && menu.children.length > 0) {
        _recurseGetMenu(menu.children)
      }
    }
  }

  _recurseGetMenu(menuList)

  return findMenu
}

export { setBtnPermission }
